<template>
  <div class="timing1">
    <div class="dialogItems">
      <div>
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px" class="demo-ruleForm autoClass">
          <el-form-item label="路由名称" prop="">
            <el-input disabled v-model="dataInfo.routingName" clearable placeholder="" />
          </el-form-item>
          <el-form-item label="集群ID" prop="">
            <el-select disabled v-model="dataInfo.id" placeholder="请选择">
                <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.clusterName"
                :value="item.id">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" style="width:100%;">
            <el-button style="width: 100%;" type="primary" plain @click="sendForm('ruleForm')">发送</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style="max-height:350px;overflow: scroll;"><pre style="white-space:pre-wrap;">{{ resOutInfo }}</pre></div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import experiment from '@/mixins/experiment'

import { quillEditor } from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {
    quillEditor
  },
  props:{
    options:{
      type: Array,
      require: true,
      default: () => {
        return []
      }
    },
    dataInfo:{
      type:Object,
      require:false,
      default:()=>{
        return {
          routingName:"",
          id:""
        }
      }
    }
  },
  mixins: [experiment],
  data() {
    return {
      resOutInfo:null,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      rules: {
      },
      dialogTableVisible: false
    }
  },
  created() {
  },
  mounted() {
    this.$nextTick(() => {
      
    })
  },
  methods: {
    clearList(){
       
    },
    sendForm(v) {
        let pars ={routingName:this.dataInfo.routingName,id:this.dataInfo.id}
        request({
            url: '/ht-datacenter/rabbit/getExampleData',
            method: 'post',
            data:pars
        }).then(res => {
          this.resOutInfo = res.data?JSON.parse(res.data):{}
        })
    }
  }
}
</script>

    <style lang="scss" scoped>
    .dialogItems{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .dialogItems>div{
      width: 48%;
    }
    .dialogItems>div:nth-child(2){
      background: #002b36;
      color: #e5e5e5;
      padding: 8px;
      box-sizing: border-box;
    }
    .autoInput{
      display: inline-block;
      width: 70%;
    }
    .infoTitle{
      border-bottom:1px solid #e5e5e5;
      margin-bottom: 30px;
      position: relative;
    }
    .infoTitle>span{
      position: absolute;
      left: 20px;
      background: #fff;
      width:80px;
      top:-15px;
      height:30px;
      text-align: center;
      line-height: 30px;
    }
      .el-select{
        width:100%;
      }
      .timing{
        background:#fff;
        padding:20px;
      }
  .autoClass2{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
  }
    </style>
